<template>
   <div>
      <div class="meter">
         <div>统计项</div>
         <div>数值</div>
         <div>转化率</div>
      </div>
      <div class="data">
        <ul>
          <li>
            <div>点击数</div>
            <div>434</div>
            <div>89%</div>
          </li>
          <li>
            <div>登记数</div>
            <div>434</div>
            <div>30%</div>
          </li>
           <li>
            <div>报名数</div>
            <div>434</div>
            <div>28%</div>
          </li>
           <li>
            <div>换证数</div>
            <div>434</div>
            <div>28%</div>
          </li>
           <li>
            <div>入场数</div>
            <div>434</div>
            <div>28%</div>
          </li>
           <li>
            <div>入场数</div>
            <div>434</div>
            <div>28%</div>
          </li>
        </ul>
      </div>
      <actionBtn> </actionBtn>
   </div>
</template>

<script>
  import actionBtn from 'src/components/action_btn/action_btn'

       export default {
         components: {
            actionBtn,
            
        },

        beforeCreate(){
             document.querySelector('body').setAttribute('style', 'background:#fff')
        },
         beforeDestroy () {
    document.querySelector('body').setAttribute('style', '')
      }
      
      }
</script>

<style lang="stylus" scoped>
  .meter
    display flex
    align-items center
    justify-content center
    div   
      flex 1
      text-align center
      font-size 15px
      font-weight bold
      height 0.9662rem
      line-height 0.9662rem
      border-bottom 1px solid #E5E5E5
  .data
    li 
      display flex
      align-items center
      justify-content center
      div
        flex 1
        text-align center
        font-size 13px
        height 0.9662rem
        line-height 0.9662rem
        border-bottom 1px solid #E5E5E5
        
</style>

